<!DOCTYPE html>
<html>
    {% load static %}
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
<!--external css-->
<link href="{% static 'assets/font-awesome/css/font-awesome.css' %}" rel="stylesheet" />
    
<!-- Custom styles for this template -->
<link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
<link href="{% static 'assets/css/style-responsive.css' %}" rel="stylesheet">

<!-- js placed at the end of the document so the pages load faster -->
<script src="{% static 'assets/js/jquery.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script class="include" type="text/javascript" src="{% static 'assets/js/jquery.dcjqaccordion.2.7.js' %}"></script>
<script src="{% static 'assets/js/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.nicescroll.js' %}" type="text/javascript"></script>


<!--common script for all pages-->
<script src="{% static 'assets/js/common-scripts.js' %}"></script>

<!--script for this page-->

<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="{% static 'assets/js/echarts.js' %}"></script>
<script src="{% static 'assets/js/highlight.min.js' %}"></script>
    <script>
        hljs.highlightAll();
    </script>

    <script src="{% static 'assets/dist/notice.min.js' %}"></script>
    <script>
        const notice = new Notice();
    </script>

    <script src="{% static 'assets/js/main.js' %}"></script>
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'assets/dist/notice.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/default.min.css' %}">
    <link href="{% static 'assets/css/the-datepicker.css' %}" rel="stylesheet">
    <script>
        function submitpk(clicked_id){
            var bid='#bid'+clicked_id[3];
           // console.log($(itempk).html());
            if($(bid).html()=='未结算'){
                $(bid).html('正在结算');
            }else{
                $(bid).html('未结算');
            }
            
            
        }
        
        </script>
    <script>
        
    function re(){
        document.getElementById("fu").style.display="none";
                document.getElementById("yuan").style.display="";
    };
    function openInsertModal() {

        //弹出模态框
        
        $("#myModalcjz").modal("show")
        
        };
    </script>
    <body>
        <section id="main-content">
            <section class="wrapper">
                <h3><i class="fa fa-angle-right"></i> 向供应商付款
                </h3>
                <div class="row mt">
                  <div class="col-lg-12">
                  <div class="form-panel3">
                        
                    <form id='material1' class="form-horizontal style-form" method="get">
                        <!-- <div class="form-group"> -->
                            <!-- <label class="col-sm-2 col-sm-2 control-label">搜索</label> -->
                            <div class="col-sm-4">
                                <input id="materialInput1" name='pk' type="text" class="form-control" placeholder="请输入供应商编号" required>
                            </div>
                            <button type="submit" formmethod="post" class="btn btn-success "><i class="fa fa-search"></i></button>
                          </form>
                            
                            <div class="col-sm-12">
                            <button type="button" class="btn btn-link " data-toggle="modal" data-target="#myModal1">忘记编号？</button>
                            <div class="pull-right"><label >本次结算总金额：</label><label id='sum'></label>
                              </div><br>
                          
                                    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                                        <div class="modal-dialog">
                                          <div class="modal-content">
                                            <div class="modal-header">
                                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                              <h4 class="modal-title" id="myModalLabel">搜索供应商编号</h4>
                                            </div>
                                            <div class="modal-body">
                                              <!-- Hi there, I am a Modal Example for Dashgum Admin Panel. -->
                                              <!-- 搜索条件 -->
                                              <form  id="material2" class="form-horizontal style-form">
                                                <div class="form-group">
                                                    <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                    <label class="col-sm-4 col-sm-4 control-label">
                                                        <div class="pull-right">供应商名称：</div>
                                                        </label>
                                                    <div class="col-sm-5">
                                                        <input name="vname" id="vname" type="text" class="form-control">
                                                    </div>
                                                    
                                                </div>
                                                <div class="form-group">
                                                    <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                    <label class="col-sm-4 col-sm-4 control-label">
                                                        <div class="pull-right">所在城市：</div>
                                                        </label>
                                                    <div class="col-sm-5">
                                                        <input name="city" id="city" type="text" class="form-control">
                                                    </div>
                                                    
                                                </div>
                                                <div class="form-group">
                                                    <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                    <label class="col-sm-4 col-sm-4 control-label">
                                                        <div class="pull-right">创建者编号：</div>
                                                        </label>
                                                    <div class="col-sm-5">
                                                        <input name="uid" id="uid" type="text" class="form-control">
                                                    </div>
                                                    
                                                </div>
                                                <div class="form-group">
                                                    <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                    <label class="col-sm-4 col-sm-4 control-label">
                                                        <div class="pull-right">国家：</div>
                                                        </label>
                                                    <div class="col-sm-5">
                                                      <select class="form-control"  name="country" id="country"></select>
                                                    </div>
                                                    
                                                </div>
                                                <div class="form-group">
                                                  <!-- <label class="col-sm-1 col-sm-1 control-label"></label> -->
                                                  <label class="col-sm-4 col-sm-4 control-label">
                                                      <div class="pull-right">公司编码：</div>
                                                      </label>
                                                  <div class="col-sm-5">
                                                      <select class="form-control"  name="company" id="company"></select>
                                                  </div>
                                                  <div class="col-sm-2">
                                                  <input type="submit"  class="btn btn-theme02">
                                                  </div>
                                              </div>

                                            </form>
                                            {% comment %} <h4> 供应商</h4> {% endcomment %}
                                            {% comment %} <hr> {% endcomment %}
                                            <table  class="table table-bordered table-striped table-condensed">
                                              *双击填入编号                                       
                                              <thead>
                                              <!-- 搜索编号返回的属性 style="width: 100px;"-->
                                              <tr>
                                                  <th> 供应商编号</th>
                                                  <th> 供应商名称</th>
                                                  <th> 所在城市</th>
                                                  <th> 公司编码</th>
                                                  <th> 创建者编号</th>
                                              </tr>
                                              </thead>
                                              <tbody id="searchDiv"></tbody>
                                          </table>
                                            

                                            </div>
                                            
                                            <div class="modal-footer">
                                              
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                 
                        
              {% comment %} style="display: none;" {% endcomment %}
              <form  id='material5'>  
                <div class="row mt">
                    <div class="col-md-12">
                      <div class="col-md-12">
                       
                      <div class="content-panel">
                          <!-- <div class="form-panel2"> -->
                          
                          <table class="table table-striped table-advance table-hover">
                                  <h4><i class="fa fa-angle-right"></i> 待付款列表</h4>
                                  <hr>
                                  <thead>
                                    <tr>
                                        <th></th>
                                        
                                        <th> 公司编号</th>
                                        <th> 供应商编号</th>
                                        <th> 发票编号</th>
                                        <th> 发票备注</th>
                                        <th> 发票过账时间</th>
                                        <th> 总金额</th>
                                        <th> 结算</th>
                                    
                                    </tr>
                                    </thead>
                              <tbody id="searchDiv2"></tbody>
                          </table>
                          
                      </div>
                      <br>
                     
                        <div class="col-sm-6">
                            <input  type="text" id="materialInput2" placeholder="请输入付款过账日期" class="form-control" >
                
                        </div>
                        <button type="submit" class="btn btn-theme03"  formmethod="post" class="btn btn-success ">提交</button>
                        
                     <br>
                      
                      </div>
                       
                        </div>
                        
                    </form>
                    </div><!-- /col-md-12 -->
                </div><!-- /row -->
                
          </section>
        </section><!-- /MAIN CONTENT -->
  
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                2014 - Alvarez.is
                <a href="basic_table.html#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </section>

        {% comment %} <textarea id="item_result"></textarea> {% endcomment %}

        <script>
            $('#material5').on('submit', function(e) {
                e.preventDefault();
                var checkId=document.getElementsByName("checkbox")
                checkar=[];
                out2='['
                for(k in checkId){
                    if(checkId[k].checked){
                        var itempk='#itempk'+k.toString();
                        console.log(k);
                        //checkar.push($(itempk).html());
                        //console.log(checkar.value);
                        out2+=$(itempk).html()+',';

                    }
                }
                out2+=']';
                console.log(out2);
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_pay_invoice' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        postDate: $("#materialInput2").val(),
                        invoiceIDList: out2,
                        
                        
                    },
                    success: function(data) {
                        $('#item_result').text(data);
                        var dataObj = eval("("+data+")");
                        
                       var out='';
                        for(i = 0; i < dataObj.gr.length; i++) {
                           
                         }
                         //结算额
                         document.getElementById("sum").innerHTML=out;
                         console.log(out);
                    },
                    failure: function() {

                    }
                })
                
                
            });
            $('#material1').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_search_unpaied_invoice' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        vid: $("#materialInput1").val(),
                        
                        //输入2个搜索框的值
                    },
                    success: function(data) {
                       // $('#item_result').text(data);
                        var dataObj = eval("("+data+")");
                       // var content=dataObj[0].gr;
                        //console.log(dataObj.gr[0].pk);
                       var out='';
                        for(i = 0; i < dataObj.gr.length; i++) {
                            content2 =dataObj.gr[i].fields;
                            out += '<tr><td><input  id="cid'+i+'" onclick="submitpk(this.id)" name="checkbox" type="checkbox" ></td><td >'+ dataObj.gr[i].vendor.companyCode+ '</td><td>' + dataObj.gr[i].vendor.id + '</td><td id="itempk'+i+'">' + dataObj.gr[i].pk+ '</td><td>' + dataObj.gr[i].fields.text+ '</td><td>'+ dataObj.gr[i].fields.postDate.quantity+ '</td><td>'+ content2.sumAmount+ '</td><td id="bid'+i+'">未结算</td></tr>';
                         }
                        //  $('#item_result').text(out);
                         document.getElementById("searchDiv2").innerHTML=out;
                         console.log(out);
                    },
                    failure: function() {

                    }
                })
            });
            function submitpk(clicked_id){
                var bid='#bid'+clicked_id[3];
               // console.log($(itempk).html());
                if($(bid).html()=='未结算'){
                    $(bid).html('正在结算');
                }else{
                    $(bid).html('未结算');
                }
                
                
            };
            //其他搜索
            $('#material2').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_search_vendor' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        vname: $("#vname").val(),
                        city: $("#city").val(),
                        country: $("#country").val(),
                        companyCode: $("#company").val(),
                        uid: $("#uid").val(),
                    },
                    success: function(data) {
                        $('#item_result').text(data);
                        var dataObj = eval("("+data+")");
                        var out = "";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            fields = dataObj[i].fields
                            out += '<tr><td>'+ dataObj[i].pk+ '</td><td>' + fields.vname+ '</td><td>' + fields.city+ '</td><td>' + fields.country+ '</td><td>'+ fields.euser+ '</td><tr>';
                        }
                        document.getElementById("searchDiv").innerHTML=out;
                    },
                    failure: function() {

                    }
                })
            });
            //双击行 信息进入“搜索商品条件”三个框
            $("table").on("dblclick","tr",function(e){
                document.getElementById("materialInput1").value=$(this).find('td').eq(0).text();
                $('#myModal1').modal('hide');
            });

                </script>


        <!-- 确认提示 -->
        <script>
            function tip(){
                if(confirm("您确认修改吗？")){
                return true;
                }
                else{
                return false;
                }
            } 
        </script>

    </body>
</html>